<template>
  <div class="app-container">
    <el-form ref="form" :model="leave" label-width="120px">
      <el-form-item label="企业名称">
        <el-autocomplete
          v-model="leave.internName"
          :fetch-suggestions="querySearchAsyncForIntern"
          placeholder="请输入内容"
          @select="internHandleSelect"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item label="学生名">
        <el-autocomplete
          v-model="leave.stuName"
          :fetch-suggestions="querySearchAsyncForStu"
          placeholder="请输入内容"
          @select="stuHandleSelect"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item label="请假开始时间">
        <el-date-picker
          v-model="leave.leaveStartTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="请假结束时间">
        <el-date-picker
          v-model="leave.leaveEndTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="请假原因">
        <el-input
        class="leave-textarea"
          type="textarea"
          placeholder="100字内即可"
          maxlength="100"
          rows="5"
          v-model="leave.leaveContent"
        />
      </el-form-item>

      <el-form-item label="请假状态">
        <el-switch
          v-model="leave.leaveStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import leaveApi from "@/api/leave";
import stuApi from "@/api/student";
import internApi from "@/api/internship";

export default {
  data() {
    return {
      internRestaurants: [],
      stuRestaurants: [],
      state: "",
      leave: {
        id: "",
        sid: "",
        stuName: "",
        iid: "",
        internName: "",
        leaveStartTime: "",
        leaveEndTime: "",
        leaveContent: "",
        leaveStatus: "",
      },
    };
  },
  created() {},
  mounted() {
    this.loadAllIntern();
  },
  methods: {
    loadAllIntern() {
      internApi.getSampleInternshipList().then((resp) => {
        this.internRestaurants = resp.data.list;
      });
    },
    loadAllStu(iid) {
      stuApi.getSampleStudentList(iid).then((resp) => {
        console.log("stu ===> " + resp.data.list);
        this.stuRestaurants = resp.data.list;
      });
    },
    //搜索企业
    querySearchAsyncForIntern(queryString, cb) {
      var restaurants = this.internRestaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      //   this.timeout = setTimeout(() => {
      cb(results);
      //   }, 500 * Math.random());
    },
    //搜索学生
    querySearchAsyncForStu(queryString, cb) {
      var restaurants = this.stuRestaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      //   this.timeout = setTimeout(() => {
      cb(results);
      //   }, 500 * Math.random());
    },

    createStateFilter(queryString) {
      return (state) => {
        return state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    //选中触发
    internHandleSelect(item) {
      this.leave.stuName = "";
      this.leave.internName = item.value;
      this.leave.iid = item.id;
      this.loadAllStu(item.id);
    },
    stuHandleSelect(item) {
      this.leave.stuName = item.value;
      this.leave.sid = item.id;
      console.log(this.leave.iid)
      console.log(this.leave.sid)
    },

    onSubmit() {
      leaveApi.saveOrUpdateLeave(this.leave).then((resp) => {
        //提示信息
        this.$message({
          type: "success",
          message: "成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push({ path: "/leave/list" });
      });
    },
  },
};
</script>

<style>
.leave-textarea{
    width: 300px;
}
</style>
